<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡应用</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#818CF8'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="w-[375px] min-h-[762px] mx-auto relative bg-white">
        <nav class="fixed top-0 w-[375px] bg-white px-4 py-3 flex justify-between items-center z-50 border-b">
            <div class="flex flex-col">
                <span class="text-lg font-medium text-gray-800">早上好</span>
                <span class="text-sm text-gray-500">快来打卡吧</span>
            </div>
            <div class="w-10 h-10 rounded-full overflow-hidden">
                <img src="https://ai-public.mastergo.com/ai/img_res/528e49cba88884e427dfecabea1cf548.jpg" class="w-full h-full object-cover" alt="头像">
            </div>
        </nav>

        <main class="pt-20 pb-20 px-4">
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium">2023 年 12 月</h2>
                    <div class="flex gap-4">
                        <button class="text-gray-400"><i class="fas fa-chevron-left"></i></button>
                        <button class="text-gray-400"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
                <div class="grid grid-cols-7 gap-2">
                    <div class="text-center text-sm text-gray-500 py-2">日</div>
                    <div class="text-center text-sm text-gray-500 py-2">一</div>
                    <div class="text-center text-sm text-gray-500 py-2">二</div>
                    <div class="text-center text-sm text-gray-500 py-2">三</div>
                    <div class="text-center text-sm text-gray-500 py-2">四</div>
                    <div class="text-center text-sm text-gray-500 py-2">五</div>
                    <div class="text-center text-sm text-gray-500 py-2">六</div>
                </div>
                <div class="grid grid-cols-7 gap-2">
                    <div class="text-center py-2 text-gray-300">26</div>
                    <div class="text-center py-2 text-gray-300">27</div>
                    <div class="text-center py-2 text-gray-300">28</div>
                    <div class="text-center py-2 text-gray-300">29</div>
                    <div class="text-center py-2 text-gray-300">30</div>
                    <div class="text-center py-2">1</div>
                    <div class="text-center py-2">2</div>
                    <div class="text-center py-2">3</div>
                    <div class="text-center py-2">4</div>
                    <div class="text-center py-2">5</div>
                    <div class="text-center py-2 relative">
                        6
                        <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></div>
                    </div>
                    <div class="text-center py-2 relative">
                        7
                        <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></div>
                    </div>
                    <div class="text-center py-2 relative">
                        8
                        <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></div>
                    </div>
                    <div class="text-center py-2">9</div>
                    <div class="text-center py-2 border border-primary rounded-lg">10</div>
                    <div class="text-center py-2">11</div>
                    <div class="text-center py-2">12</div>
                    <div class="text-center py-2">13</div>
                    <div class="text-center py-2">14</div>
                    <div class="text-center py-2">15</div>
                    <div class="text-center py-2">16</div>
                    <div class="text-center py-2">17</div>
                    <div class="text-center py-2">18</div>
                    <div class="text-center py-2">19</div>
                    <div class="text-center py-2">20</div>
                    <div class="text-center py-2">21</div>
                    <div class="text-center py-2">22</div>
                    <div class="text-center py-2">23</div>
                    <div class="text-center py-2">24</div>
                    <div class="text-center py-2">25</div>
                    <div class="text-center py-2">26</div>
                    <div class="text-center py-2">27</div>
                    <div class="text-center py-2">28</div>
                    <div class="text-center py-2">29</div>
                    <div class="text-center py-2">30</div>
                    <div class="text-center py-2">31</div>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                    <i class="fas fa-calendar-check text-primary text-xl mb-2"></i>
                    <div class="text-2xl font-medium mb-1">12</div>
                    <div class="text-sm text-gray-500">本周打卡</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                    <i class="fas fa-fire text-primary text-xl mb-2"></i>
                    <div class="text-2xl font-medium mb-1">7</div>
                    <div class="text-sm text-gray-500">连续打卡</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                    <i class="fas fa-chart-line text-primary text-xl mb-2"></i>
                    <div class="text-2xl font-medium mb-1">86%</div>
                    <div class="text-sm text-gray-500">完成率</div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium">我的计划</h2>
                    <a href="new-plan.html" class="text-sm text-primary">新建</a>
                </div>
                <div class="space-y-3">
                    <a href="plan-detail.html?id=1" class="block p-3 rounded-lg hover:bg-gray-50 border border-gray-100">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <i class="fas fa-book-open text-primary mr-3"></i>
                                <span>每日阅读计划</span>
                            </div>
                            <span class="text-sm text-gray-500">80%</span>
                        </div>
                    </a>
                    <a href="plan-detail.html?id=2" class="block p-3 rounded-lg hover:bg-gray-50 border border-gray-100">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <i class="fas fa-running text-blue-500 mr-3"></i>
                                <span>每周健身打卡</span>
                            </div>
                            <span class="text-sm text-gray-500">2/3次</span>
                        </div>
                    </a>
                </div>
            </div>
        </main>

        <nav class="fixed bottom-0 w-[375px] bg-white border-t flex justify-around items-center py-2">
            <a href="d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\index.html" class="flex flex-col items-center text-primary">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plans.html" class="flex flex-col items-center text-gray-400">
                <i class="fas fa-tasks text-xl mb-1"></i>
                <span class="text-xs">打卡计划</span>
            </a>
            <a href="d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\profile.html" class="flex flex-col items-center text-gray-400">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </nav>
    </div>
</body>
</html>